﻿<!DOCTYPE html>
<html>
<head>
    <title>OverlyingThemeRangeToGoogle</title>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <link href='./css/bootstrap.min.css' rel='stylesheet' />
    <link href='./css/bootstrap-responsive.min.css' rel='stylesheet' />
    <script src="../libs/SuperMap.Include.js"></script>
    <script src="js/iConnector/iConnectorGoogle.js"></script>
    <script>
        var map, host = document.location.toString().match(/file:\/\//) ? "http://localhost:8090" : 'http://' + document.location.host;
        url = host + "/iserver/services/map-china400/rest/maps/China";
        function initialize() {
            var myLatlng = new google.maps.LatLng(39, 105);
            var mapOptions = {
                center: myLatlng,
                zoom: 4,
                streetViewControl: true,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            //初始化google的地图
            map = new google.maps.Map(document.getElementById('map-canvas'),
                    mapOptions);
        }
        //注册window初始化事件
        google.maps.event.addDomListener(window, 'load', initialize);
        //创建分段专题图
        function addThemeRange() {
            //创建制作分段专题图服务类
            var themeService = new SuperMap.REST.ThemeService(url, {eventListeners:{"processCompleted": themeCompleted, "processFailed": themeFailed}}),
                    style1 = new SuperMap.REST.ServerStyle({
                        fillForeColor: new SuperMap.REST.ServerColor(137,203,187),
                        lineColor: new SuperMap.REST.ServerColor(0,0,0),
                        lineWidth: 0.1
                    }),
                    style2 = new SuperMap.REST.ServerStyle({
                        fillForeColor: new SuperMap.REST.ServerColor(233,235,171),
                        lineColor: new SuperMap.REST.ServerColor(0,0,0),
                        lineWidth: 0.1
                    }),
                    style3 = new SuperMap.REST.ServerStyle({
                        fillForeColor: new SuperMap.REST.ServerColor(135,157,157),
                        lineColor: new SuperMap.REST.ServerColor(0,0,0),
                        lineWidth: 0.1
                    }),
                    themeRangeIteme1 = new SuperMap.REST.ThemeRangeItem({
                        start: 0,
                        end: 500000000000,
                        style: style1
                    }),
                    themeRangeIteme2 = new SuperMap.REST.ThemeRangeItem({
                        start: 500000000000,
                        end: 1000000000000,
                        style: style2
                    }),
                    themeRangeIteme3 = new SuperMap.REST.ThemeRangeItem({
                        start: 1000000000000,
                        end:  3000000000000,
                        style: style3
                    }),
                    themeRange = new SuperMap.REST.ThemeRange({
                        rangeExpression: "SMAREA",
                        rangeMode: SuperMap.REST.RangeMode.EQUALINTERVAL,
                        items: [themeRangeIteme1,themeRangeIteme2,themeRangeIteme3]
                    }),
                    //专题图参数
                    themeParameters = new SuperMap.REST.ThemeParameters({
                        datasetNames: ["China_Province_pg"],
                        dataSourceNames: ["China"],
                        joinItems: null,
                        themes: [themeRange]
                    });
            //向iserver发送请求
            themeService.processAsync(themeParameters);
        }
        //生成专题图后将其叠加到google地图上面
        function themeCompleted(themeEventArgs) {
            if(themeEventArgs.result.resourceInfo.id) {
                //通过iConnector生成可以在google地图上叠加的分段专题图图层，并且添加到map里面
                map.overlayMapTypes.insertAt(
                        0, SuperMap.Web.iConnector.Google.getLayer(url,{layersID:themeEventArgs.result.resourceInfo.id}));
            }
        }
        function themeFailed(serviceFailedEventArgs) {
            alert(serviceFailedEventArgs.error.errorMsg);
        }
    </script>
</head>
<body>
<input type="button" class="btn" value="创建分段专题图" onclick="addThemeRange()" />
<div id="map-canvas" style="width: 100%;height: 500px"></div>
</body>
</html>